<template>
  <div class="icons-wrapper">
    <Edit style="width: 1em; height: 1em; margin-right: 8px" />
    <el-tabs type="border-card">
      <el-tab-pane
        v-for="(icons, key) in iconsList"
        :key="key"
        :label="icons.name"
      >
        <div
          v-for="item in icons.icons"
          :key="item"
          @click="handleClipboard(isElement(key), item, $event)"
        >
          <el-tooltip placement="top">
            <template v-slot:content>
              {{
                isElement(key)
                  ? generateElementIconCode(item)
                  : generateIconCode(item)
              }}
            </template>
            <div class="icon-item">
              <template v-if="isElement(key)">
                <i :class="'el-icon-' + item" />
              </template>
              <template v-else>
                <svg-icon :icon-class="item" class-name="disabled" />
              </template>
              <span>{{ item }}</span>
            </div>
          </el-tooltip>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { reactive } from 'vue';
import clipboard from '@/utils/clipboard';
// 获取文件夹下所有的svg名称
// import.meta.glob 只接受字符串不接受变量和模板拼接
const _genSvgNameData = () => {
  const modules = import.meta.glob('../../../icons/svg/*.svg', {
    eager: true
  });
  const svgNames = [];

  // 遍历所有 SVG 文件
  for (const path in modules) {
    // 获取文件名称
    const fileName = path.split('/').pop().replace('.svg', '');
    svgNames.push(fileName);
  }

  return svgNames;
};

// 获取color文件下的svg数据
const _genColorNameData = () => {
  const modules = import.meta.glob('../../../icons/color/*.svg', {
    eager: true
  });
  const svgNames = [];

  // 遍历所有 SVG 文件
  for (const path in modules) {
    // 获取文件名称
    const fileName = path.split('/').pop().replace('.svg', '');
    svgNames.push(fileName);
  }

  return svgNames;
};

const iconsList = reactive({
  systemFill: {
    name: '系统内置图标',
    icons: _genSvgNameData('../../../icons/svg/*.svg')
  },
  colorFill: {
    name: '多色彩图标',
    icons: _genColorNameData('../../../icons/color/*.svg')
  }
});

const isElement = key => key === 'element';

const generateIconCode = name => `<svg-icon icon-class="${name}"/>`;

const generateElementIconCode = name => `<i class="el-icon-${name}" />`;

const handleClipboard = (isElement, svg, event) => {
  const text = isElement ? generateElementIconCode(svg) : generateIconCode(svg);
  clipboard(text, event);
};
</script>

<style lang="scss" scoped>
.icons-wrapper {
  padding: 10px 20px;
}

.icon-item {
  margin: 20px;
  height: 85px;
  text-align: center;
  width: 100px;
  float: left;
  font-size: 30px;
  color: black;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

span {
  display: block;
  margin-top: 20px;
  font-size: 12px;
}

.disabled {
  pointer-events: none;
}
</style>
